﻿<%@page import="com.cchr.acms.util.HtmlComponentUtil.SelectOption"%>
<%@page import="java.util.List"%>
<%@page import="com.cchr.acms.util.HtmlComponentUtil"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<style>
<!--
#jq-datatables-example_wrapper .table-header{
	display: none;
}

table .NEW{
	color: red;
}

table .PROCESS{
	color: #cc6600;
}

table .COMPLETED{
	color: green;
}
-->
</style>
	<!--show list-->
	<div class="row">
			<div class="col-sm-12">
				<div class="panel">
					 <!--search conditions-->
					<div class="row">
						<div class="col-sm-12">
						<form class="form-horizontal " role="form" id="abuseList" >
							<div class="panel-body" style="padding:20px">
							<div class="row">
								<div class="col-sm-4">
									<div class="form-group">
										<label  class="col-sm-5 control-label">Patient First Name:</label>
										<div class="col-sm-7">
											<input type="text" class="form-control" name="queryEntity.patientName" id="queryEntityPatientName">
										</div> 
									</div>
								</div>	
								<div class="col-sm-4">
									<div class="form-group">
										<label  class="col-sm-5 control-label">Patient Last Name:</label>
										<div class="col-sm-7">
											<input type="text" class="form-control" name="queryEntity.patientLastName" id="queryEntityPatientLastName">
										</div> 
									</div>
								</div>					
								<div class="col-sm-4">
									<div class="form-group">
										<label  class="col-sm-5 control-label">Drug Name:</label>
										<div class="col-sm-7">
											<%= HtmlComponentUtil.getSelect("queryEntityDrugName", "queryEntity.DrugName", (List<SelectOption>)request.getAttribute("drugs"), null, "Select an option...") %>
										</div> 
									</div>
								</div>					
							</div>
							<div class="row">
								<div class="col-sm-4">
									<div class="form-group">
										<label  class="col-sm-5 control-label">Facility Name:</label>
										<div class="col-sm-7">
											<input type="text" class="form-control" name="queryEntity.facilityName" id="queryEntityFacilityName">
										</div> 
									</div>
								</div>
							    <div class="col-sm-4">
									<div class="form-group">
										<label  class="col-sm-5 control-label">Doctor First Name:</label>
										<div class="col-sm-7">
											<input type="text" class="form-control" name="queryEntity.doctorName" id="queryEntityDoctorName">
										</div> 
									</div>
								</div>
								<div class="col-sm-4">
									<div class="form-group">
										<label  class="col-sm-5 control-label">Doctor Last Name:</label>
										<div class="col-sm-7">
											<input type="text" class="form-control" name="queryEntity.doctorLastName" id="queryEntityDoctorLastName">
										</div> 
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-sm-4"></div>
								<div class="col-sm-4"></div>
								<div class="col-sm-4">
									<div class="form-group">
										<label  class="col-sm-5 control-label"><a class="btn btn-primary" style="border-radius:10px; width:100px" id="searchBtn">Search</a></label>
										<div class="col-sm-7" style="text-align:center;margin-top:15px">
											<label>
												<input type="checkbox" id="advancedcheckbox" name="advancedcheckbox" class="px"> 
												<span class="lbl">Advanced search</span>
											</label>
										</div> 
									</div>
								</div>
							</div>
							<div id="advanceArea" style="display:none;margin-top:30px">	
								<div class="row">	
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Age of Abused:</label>
												<div class="col-sm-7">
													<input type="text" class="form-control" name="queryEntity.abusedAge" id="queryEntityAbusedAge">
												</div> 
											</div>
										</div>
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Date Range of Abuse From:</label>
												<div class="col-sm-7">
													<div class="input-group date bs-datepicker-component">
														<input type="text" name="queryEntity.abuseStart" id="queryEntityAbuseStart" class="form-control"><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
													</div>
												</div>
											</div>
										</div>	
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">To:</label>
												<div class="col-sm-7">
													<div class="input-group date bs-datepicker-component">
														<input type="text" name="queryEntity.abuseEnd" id="queryEntityAbuseEnd" class="form-control"><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
													</div>
												</div>
											</div>
										</div>	
								</div>
									<div class="row">	
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">City:</label>
												<div class="col-sm-7">
													<input type="text" class="form-control" name="queryEntity.abusedcity" id="queryEntityAbusedcity">
												</div> 
											</div>
										</div>
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">State/Province:</label>
												<div class="col-sm-7">
													<input type="text" class="form-control" name="queryEntity.abusedstate" id="queryEntityAbusedstate">
												</div> 
											</div>
										</div>
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Country:</label>
												<div class="col-sm-7">
													<%= HtmlComponentUtil.getSelect("queryEntityAbusedcountry", "queryEntity.abusedcountry", (List<SelectOption>)request.getAttribute("countryDatas"), null, "Select Country...") %>
												</div> 
											</div>
										</div>	

									</div>
									<div class="row">
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Drug Type:</label>
													<div class="col-sm-7">
														<%= HtmlComponentUtil.getSelect("queryEntityDrugType", "queryEntity.drugType", (List<SelectOption>)request.getAttribute("drugTypeOptions"), null, "Select an option...") %>
													</div> 
											</div> 
										</div>
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Type of Abuse:</label>
												<div class="col-sm-7">
													<%= HtmlComponentUtil.getSelect("queryEntityAbuseType", "queryEntity.abuseType", (List<SelectOption>)request.getAttribute("abuseTypes"), null, "Select an option...") %>
												</div> 
											</div>
										</div>
										<div class="col-sm-4">
											<div class="form-group ">
												<label  class="col-sm-5 control-label">Type of Facility:</label>
												<div class="col-sm-7">
													<%= HtmlComponentUtil.getSelect("queryEntityFacilityType", "queryEntity.facilityType", (List<SelectOption>)request.getAttribute("facilityTypes"), null, "Select an option...") %>
												</div> 
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Facility Location City:</label>
												<div class="col-sm-7">
													<input type="text" class="form-control" name="queryEntity.facilityCity" id="queryEntityFacilityCity">
												</div> 
											</div>
										</div>	
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Facility Location State:</label>
												<div class="col-sm-7">
													<input type="text" class="form-control" name="queryEntity.facilityState" id="queryEntityFacilityState">
												</div> 
											</div>
										</div>
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Facility Location Country:</label>
												<div class="col-sm-7">
													<%= HtmlComponentUtil.getSelect("queryEntityFacilityCountry", "queryEntity.facilityCountry", (List<SelectOption>)request.getAttribute("countryDatas"), null, "Select Country...") %>
												</div> 
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Type of Doctor:</label>
												<div class="col-sm-7">
													<%= HtmlComponentUtil.getSelect("queryEntityDoctorType", "queryEntity.doctorType", (List<SelectOption>)request.getAttribute("docTypes"), null, "Select an option...") %>
												</div> 
											</div>
										</div>
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Working with an Attorney:</label>
												<div class="col-sm-7">
													<select class="unRender" name="queryEntity.hasAttoney" id="queryEntityHasAttoney">
														<option></option>
														<option value="Yes">Yes</option>
														<option value="No">No</option>
													</select>
												</div> 
											</div>
										</div>
										<div class="col-sm-4">
											<div class="form-group">
												<label  class="col-sm-5 control-label">Type of Insurance Used:</label>
												<div class="col-sm-7">
													<%= HtmlComponentUtil.getSelect("queryEntityInsuranceType", "queryEntity.insuranceType", (List<SelectOption>)request.getAttribute("insTypes"), null, "Select an option...") %>
												</div> 
											</div>
										</div>										
									</div>
									
								</div>
							</div>

							</div>
						</form>
						</div>

					</div>
					<div class="row">
						<div class="col-sm-12">
							<div class="panel-body">
								<div class="table-primary">
									<table width="100%" cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="jq-datatables-example">
										<thead>
											<tr>
												<th>Case NO. </th>
												<th>Patient Name</th>
												<th>Doctor Name</th>
												<th>Facility Name</th>
												<th>City</th>
												<th>Processed By</th>
												<th>Last Update Date</th>
												<th>Last Updated By</th>
												<th>Case Status</th>
												<th>Operation</th>
											</tr>
										</thead>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div><!-- / #panel -->
		</div><!-- / #row -->
	<!--[if !IE]> -->
	<script type="text/javascript"> window.jQuery || document.write('<script src="${pageContext.request.contextPath}/assets/javascripts/jquery-2.0.3.min.js">'+"<"+"/script>"); </script>
<!-- <![endif]-->
<!--[if lte IE 9]>
	<script type="text/javascript"> window.jQuery || document.write('<script src="${pageContext.request.contextPath}/assets/javascripts/jquery-1.8.3.min.js">'+"<"+"/script>"); </script>
<![endif]-->
	<script>
	function refreshTable()
	{
		 window.dataTable.fnDraw();
	}
	function completeButtonClick(id){
  	  $.post("${pageContext.request.contextPath}/case/complete/" + id,{},function(result){
  		  $('#myModal').modal('show')
  		  window.dataTable.fnDraw();
  	  });
    };
    
    function recallButtonClick(id){
  	  $.post("${pageContext.request.contextPath}/case/recall/" + id,{},function(result){
  		  $('#myModal').modal('show')
  		  window.dataTable.fnDraw();
  	  });
    };
    
    function invalidButtonClick(id){
    	$.post("${pageContext.request.contextPath}/case/invalid/" + id,{},function(result){
    		  $('#myModal').modal('show')
    		  window.dataTable.fnDraw();
    	  });
    }
		init.push(function () {		
			var options2 = {
				orientation: $('body').hasClass('right-to-left') ? "auto right" : 'auto auto',
				autoclose: true
			}
			$('.bs-datepicker-component').datepicker(options2);
			
			$("#advancedcheckbox").click(function(){  
				if($(this).prop("checked")){
					$("#advanceArea").show();
					$('#queryEntityAbusedcountry').val('United States').trigger("change");
					$('#queryEntityFacilityCountry').val('United States').trigger("change");
				}else{
					$("#advanceArea").hide();
					$('#queryEntityAbusedcountry').val(null).trigger("change");
					$('#queryEntityFacilityCountry').val(null).trigger("change");
				}
		      });  
			
			$("select:not(.unRender)").select2({
			    allowClear: true
			});
			
			var operationButtonInit = function(data, type, full) {
				var comp = '<div class="btn-group btn-group-sm" style="width:115px">' + 
								'<a target="_blank" class="btn btn-primary" type="button" href=\'${pageContext.request.contextPath}/case/detail/'+ full.id +'\'>View Detail</a>' +
								'<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button"><i class="fa fa-caret-down"></i></button>' +
								'<ul class="dropdown-menu">';
				<c:if test="${user.type == '1'}">
					if(full.status == 'COMPLETED' || full.status == 'INVALID')
					{
						comp += '<li><a type="button" href="javascript:void(0);" onclick="recallButtonClick(' + full.id + ')">Recall Case</a></li>';
					}
				</c:if>
					if(full.status != 'COMPLETED' && full.status != 'INVALID')
					{
						comp += '<li><a type="button" href="javascript:void(0);"  onclick="completeButtonClick(' + full.id + ')">Set Complete</a></li>';
						comp += '<li><a type="button" href="javascript:void(0);"  onclick="invalidButtonClick(' + full.id + ')">Set Invalid</a></li>';
					}
					comp += '</ul></div>';
				return comp;
			};
			
			var statusInit = function(data, type, full) {
				var comp = '<div class="' + full.status + '"><strong>' + full.status
							'</strong></div>';
				return comp;
			};
			
			window.dataTable = $('#jq-datatables-example').dataTable( {
				'sPaginationType' : 'full_numbers',
				'bProcessing' : true,
				'bServerSide' : true,
				'bDeferRender' : true,
				"sServerMethod" : "POST",
				"bLengthChange": false, //改变每页显示数据数量
				"bSort": false, //排序功能
				"bFilter": false,
				"iDisplayLength" : ${user.pageSize}, 
				"ajax": {
				    "url": '${pageContext.request.contextPath}/case/showAbuseListJson',
				    "data": function ( d ) {
				        d.patientName = $('#queryEntityPatientName').val();
				        d.patientLastName = $('#queryEntityPatientLastName').val();
				        d.doctorName = $('#queryEntityDoctorName').val();
				        d.doctorLastName = $('#queryEntityDoctorLastName').val();
				        d.facilityName = $('#queryEntityFacilityName').val();
				        d.drugName = $('#queryEntityDrugName').val();
				        d.abuseStart = $('#queryEntityAbuseStart').val();
				        d.abuseEnd = $('#queryEntityAbuseEnd').val();
				        d.abusedAge = $('#queryEntityAbusedAge').val();
				        d.drugType = $('#queryEntityDrugType').val();
				        d.abusedcity = $('#queryEntityAbusedcity').val();
				        d.abusedstate = $('#queryEntityAbusedstate').val();
				        d.abusedcountry = $('#queryEntityAbusedcountry').val();
				        d.abuseType = $('#queryEntityAbuseType').val();
				        d.facilityType = $('#queryEntityFacilityType').val();
				        d.doctorType = $('#queryEntityDoctorType').val();
				        d.facilityCity = $('#queryEntityFacilityCity').val();
				        d.facilityState = $('#queryEntityFacilityState').val();
				        d.facilityCountry = $('#queryEntityFacilityCountry').val();
				        d.hasAttoney = $('#queryEntityHasAttoney').val();
				        d.insuranceType = $('#queryEntityInsuranceType').val();
					}
				},
				'aoColumnDefs' : [
				                  {aTargets : [ '_all' ], sDefaultContent : '&nbsp;'},
				                  {aTargets : [ 0 ], mData : 'sequence'},
				                  {aTargets : [ 1 ], mData : 'patientName'},
				                  {aTargets : [ 2 ], mData : 'doctorName'},
				                  {aTargets : [ 3 ], mData : 'facilityName'},
				                  {aTargets : [ 4 ], mData : 'city'},
				                  {aTargets : [ 5 ], mData : 'processedBy'},
				                  {aTargets : [ 6 ], mData : 'lastUpdateDate'},
				                  {aTargets : [ 7 ], mData : 'lastUpdatedBy'},
				                  {aTargets : [ 8 ], mRender : statusInit},
				                  {aTargets : [ 9 ], mRender : operationButtonInit,'bSortable' : false},
				                  ]
	
			} ); 
	      
	      $('#searchBtn').click(function(){
				var settings = window.dataTable.fnSettings();
				settings._iDisplayStart = 0;
				window.dataTable.fnDraw();
	      });
	      
		});
	</script>
	
	<!-- Success -->
	<div id="myModal" class="modal modal-alert modal-success fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<i class="fa fa-check-circle"></i>
				</div>
				<div class="modal-title">Success</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
				</div>
			</div> <!-- / .modal-content -->
		</div> <!-- / .modal-dialog -->
	</div> <!-- / .modal -->
